<script>
    // vue2.x的响应式原理
    function updateView() {
        console.log("视图更新了~");
    }

    function definedReactive(target, key, value) {
        // console.log(target,key,value);
        observer(value); // 深度监听

        Object.defineProperty(target, key, {
            get() {
                // console.log("get...");
                return value
            },
            set(newValue) {
                observer(newValue); // 深度监听

                value = newValue
                // 数据变了，我监听到了，我要去更新视图
                updateView()
            }
        })
    }

    function observer(target) {
        if (typeof target !== "object" || target === null) {
            return target
        }

        for (let key in target) {
            definedReactive(target, key, target[key])
        }
    }

    // 准备数据
    // 目的：name,age,info,address
    let data = {
        name: "码路",
        age: 18,
        info: {
            address: "bj",
        }
    };

    // 监听数据，数据劫持
    observer(data)

    // 当数据变了，要更新视图
    // console.log(data.name);
    // data.name = "malu";
    // console.log(data.name);
</script>